<template>
    <el-dialog :modal=false :visible.sync="visible" v-dialogDrag
               style="width:100%;margin-left: 0%;height: 100%;"
               :close-on-click-modal="false" :before-close="clearLayerAttr">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <template v-for="(item,index) in tabPaneArray">
                <el-tab-pane :label="item.label" :name="item.name">
                    <el-table :data="item.data" style="height: 300px;overflow: auto">
                        <el-table-column
                                prop="date"
                                label="日期"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label="地址">
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </template>
        </el-tabs>
    </el-dialog>
</template>

<script>
    export default {
        name: "layerAttrDialog",
        data() {
            return {
                tabPaneArray: [],
                visible: false,
                activeName: "name1",
                i: 1
            }

        },
        methods: {
            handleClick() {

            },
            clearLayerAttr() {
                this.tabPaneArray = [];
                this.visible = false;
            }
        },
        created() {
            let that = this;
            this.$Bus.$on("attrData", res => {
                if (res !== undefined) {
                    let name = "name" + this.i;
                    this.i++;
                    let data = {label: "layer", name: name, data: []};
                    data.data = res.tableData;
                    that.tabPaneArray.push(data);
                    that.visible = res.visible;
                }
            })
        }
    }

</script>

<style>
    .el-dialog__wrapper {
        width: 70%;
        margin-left: 30%;
        overflow: hidden;
    }

    .el-dialog__body {
        height: 100%;
    }

    .el-dialog .el-dialog--small {
        height: 75%;
    }
</style>